<div class="col-sm-12">
    <div class="row filemanager">

        <div class="col-xs-6 col-sm-4 col-md-3" th:each="ichnographyList:${ichnographyList}">
            <div class="thmb">
                <div class="thmb-prev">
                    <img src="../../images/photos/profile-1.png"
                         style="height:200px;width:100%;background-size: 100% 100%"
                         th:src="${showUrl} + ${ichnographyList.ichnographyImg}" th:id="${ichnographyList.ichnographyId}" onclick="edit(this)" class="img-responsive" alt="">
                </div>
                <h5 class="fm-title flot-left" th:text="${ichnographyList.ichnographyName}">tu1</h5>
                <h5 class="fm-title flot-right"><i class="glyphicon  glyphicon-circle-arrow-right" th:id="${ichnographyList.ichnographyId}" onclick="goToExhibition(this)"></i></h5>
            </div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 document" th:if="${floorId} != null">
            <div class="thmb">
                <div class="thmb-prev">
                    <img src="images/photos/media-doc.png"
                         style="height:200px;width:100%;background-size: 100% 100%" class="img-responsive" alt=""
                         data-toggle="modal" data-target=".bs-example-modal-static">
                </div>
                <h5 class="fm-title">增加平面展示图</h5>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">图片上传</h4>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="post" id="saveIchnographyForm">
                    <div class="form-group">
                        <input type="file" id="imgFile" name="imgFile"/>
                        <input type="hidden" id="ichnographyImg" name="ichnographyImg"/>
                    </div>
                    <input type="hidden" id="floorId" name="floorId" th:value="${floorId}"/>
                    <input type="text" class="form-control" style="margin-top: 20px" name="ichnographyName">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveIchnography()">增加平面图</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade " id="edit" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" style="display: none;">
    <div class="modal-dialog ">
        <div class="modal-content">
            <form enctype="multipart/form-data" method="post" id="saveIchnographyForm1">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                    <h4 class="modal-title">图片上传</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <input type="file" id="imgFile1" name="imgFile"/>
                        <input type="hidden" id="ichnographyImg1" name="ichnographyImg"/>
                    </div>
                    <div class="form-group">
                        <img id="imagesFire" src="" alt="图片" style="width: 100%;height: 100%;">
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="text" name="ichnographyId" id="ichnographyId" value="">
                    <input type="hidden" name="floorId" th:value="${floorId}"/>
                    <input type="text" id="footer-title" name="ichnographyName" class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="updateIchnography()">修改</button>
                    <button type="button" class="btn btn-danger" onclick="dele()">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    $("#imgFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "ichnography/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '图片上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#ichnographyImg").val(data.response);
    });
    //    编辑
    $("#imgFile1").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "ichnography/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '图片上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#ichnographyImg1").val(data.response);
    });
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    function saveIchnography() {
        var floorId = $("#floorId").val();
        var saveIchnographyForm = $("#saveIchnographyForm").serialize();
        $.post("/ichnography/saveIchnography", saveIchnographyForm, function (data) {
            if(data > 0){
                alert("成功");
                $.goTo("/ichnography/ichnographyList", {"floorId":floorId});
            }else{
                alert("失败");
            }
        });
    }
    function updateIchnography() {
        var saveIchnographyForm = $("#saveIchnographyForm1").serialize();

        $.post("/ichnography/updateIchnography", saveIchnographyForm, function (data) {
            if(data > 0){
                alert("修改成功");
                $("#soldier-modal").remove()
                $('#edit').modal('hide');
                $.goTo("/ichnography/ichnographyList", {"floorId":1});
            }else{
                alert("修改失败");
            }
        });
    }
    var id="";
    function edit(obj) {
        id =$(obj).attr("id");
        $("#ichnographyId").val(id);
        var showurl=[[${showUrl}]];
        $.post("/ichnography/findOneForIchnography",{"ichnographyId":id},function (data) {
            $("#imagesFire").attr("src",showurl+data.ichnographyImg);
            $("#footer-title").val(data.ichnographyName)
        });
        $('#edit').modal('show');
    }


    function dele(){
        var floorId = $("#floorId").val();
        $.post("/ichnography/deleteIchnography",{"ichnographyId":id},function (data) {
            if(data>0){
                alert("删除成功");
                $("#soldier-modal").remove()
                $('#edit').modal('hide');
                $.goTo("/ichnography/ichnographyList", {"floorId":floorId});
            }else{
                alert("删除失败")
            }
        })
        $('#edit').modal('hide');
    }

    function goToExhibition(obj) {
        var id = $(obj).attr("id");
        console.log("id",id);
    }
    /*]]>*/
</script>